<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="./css/reset.css">
    <script type="text/javascript" src="./js/jquery.js"></script>
    <style>
    html,body{height: 100%;}
    body{background: #16c0b4;}
    body{font: 12px/1 Arial,'Microsoft YaHei',"SimHei",Tahoma,sans-serif;color: #333;}
    .wrap{position: relative;width: 874px;height: 700px;margin: 0 auto;}
    .wrap-bord{width: 874px;height: 694px;background: url(./images/5.png) no-repeat;position: absolute;z-index: 2;}
    .wrap-nav{width: 672px;height: 50px;background: #fff;border-radius: 25px;position: absolute;top: 163px;left: 105px;z-index: 3;box-shadow:0px 6px 10px -5px #000;}
    .wrap-main{width: 800px;height: 340px;background: #fff;position: absolute;top: 224px;left: 40px;}

    .section{display: none;}
    .section.curr{display: block;}
    .section span{position: absolute;}
    .section1 .ad{width: 140px;height: 40px;background: url(./images/1.png) no-repeat;top: 18px;right: 120px;}
    .section1 .ewm{width: 110px;height: 141px;background: url(./images/2.png) no-repeat;top: 120px;right: 70px;}
    .section1 .num{width: 188px;height: 259px;background: url(./images/3.png) no-repeat;top: 42px;left: 86px;}
    .section1 .txt{width: 295px;height: 216px;background: url(./images/4.png) no-repeat;top: 70px;right: 220px;}

    .section2 .ad{width: 140px;height: 40px;background: url(./images/10.png) no-repeat;top: 18px;right: 120px;}
    .section2 .ewm{width: 110px;height: 141px;background: url(./images/9.png) no-repeat;top: 120px;right: 70px;}
    .section2 .num{width: 188px;height: 259px;background: url(./images/7.png) no-repeat;top: 42px;left: 86px;}
    .section2 .txt{width: 295px;height: 216px;background: url(./images/8.png) no-repeat;top: 70px;right: 220px;}

    .section3 .ad{width: 140px;height: 40px;background: url(./images/11.png) no-repeat;top: 18px;right: 120px;}
    .section3 .ewm{width: 110px;height: 141px;background: url(./images/14.png) no-repeat;top: 120px;right: 70px;}
    .section3 .num{width: 188px;height: 259px;background: url(./images/12.png) no-repeat;top: 42px;left: 86px;}
    .section3 .txt{width: 295px;height: 216px;background: url(./images/13.png) no-repeat;top: 70px;right: 220px;}

    .section4 .ad{width: 150px;height: 48px;background: url(./images/15.png) no-repeat;top: 18px;right: 120px;}
    .section4 .ewm{width: 110px;height: 141px;background: url(./images/16.png) no-repeat;top: 120px;right: 70px;}
    .section4 .num{width: 188px;height: 259px;background: url(./images/17.png) no-repeat;top: 42px;left: 86px;}
    .section4 .txt{width: 295px;height: 216px;background: url(./images/18.png) no-repeat;top: 70px;right: 220px;}

    .section5 .ad{width: 140px;height: 40px;background: url(./images/21.png) no-repeat;top: 18px;right: 120px;}
    .section5 .ewm{width: 110px;height: 141px;background: url(./images/22.png) no-repeat;top: 120px;right: 70px;}
    .section5 .num{width: 188px;height: 259px;background: url(./images/19.png) no-repeat;top: 42px;left: 86px;}
    .section5 .txt{width: 295px;height: 216px;background: url(./images/20.png) no-repeat;top: 70px;right: 220px;}

    .wrap-nav ul{}
    .wrap-nav ul li{width: 168px;height: 50px;float: left;cursor: pointer;border-radius: 50px;}
    .wrap-nav ul li a{text-decoration: none;}
    .wrap-nav ul li span{width: 112px;height: 35px;background: #16c0b4 url(./images/6.png) no-repeat right top;border-radius: 35px;color: #fff;display: block;margin: 7px auto;padding-right: 35px;text-align: center;line-height: 35px;font-size: 16px;}
    .wrap-nav ul li.curr{background: #16c0b4;}
    .wrap-nav ul li.curr span{background: #fff url(./images/6.png) no-repeat 113px top;color: #16c0b4;}
    </style>
</head>
<body>
    <table width="100%" height="100%">
        <tr>
            <td>
                <div class="wrap">
                    <div class="wrap-bord"></div>
                    <div class="wrap-nav">
                        <ul>
                            <li>
                                <a href="./child1.html"><span>一起抽个奖</span></a>
                            </li>
                            <li>
                                <a href="./child2.html"><span>一起看个片</span></a>
                            </li>
                            <li>
                                <a href="./child3.html"><span>一起洗个车</span></a>
                            </li>
                            <li class="curr">
                                <a href="#"><span>一起领个钱</span></a>
                            </li>
                        </ul>
                    </div>
                    <div class="wrap-main">
                        <div class="section section5 curr">
                            <span class="ad"></span>
                            <span class="ewm"></span>
                            <span class="num"></span>
                            <span class="txt"></span>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </table>
    <script>
    $(function(){
        $('.wrap-nav li').each(function(index){
            $(this).click(function(){
                $(this).addClass('curr').siblings().removeClass('curr');
                $('.section').eq(index+1).addClass('curr').siblings().removeClass('curr');
            });
        })
    })
    </script>
</body>
</html>